<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style type="text/css">
			body{
				margin: 0;
			}
			ul{
				display: flex;
				list-style: none;
				text-align: center;
				margin: 0;
				padding: 0;
				justify-content: space-between;
			}
			li{
				width: 18%;
				line-height: 50px;
				border: 1px solid #000;
			}
			li:hover{
				cursor: pointer;
			}
			/*li.active{
				background: pink;
			}*/
		</style>
	</head>
	<body>
		<ul>
			<li class="active" style="background: pink">首页1</li>
			<li style="background: #fff;">首页2</li>
			<li style="background: #fff;">首页3</li>
			<li style="background: #fff;">首页4</li>
			<li style="background: #fff;">首页5</li>
		</ul>
		
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var first=document.getElementsByClassName("active")[0];
//			console.log(first.style.background);
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					if(this.style.background=="rgb(255, 255, 255)"){						
						for(var j=0;j<lis.length+1;j++){
							this.style.background="pink";
							if(lis[j].style.background=="pink"){
								lis[j].style.background="rgb(255, 255, 255)";
							}
						}
					}
				}
			}
		</script>
	</body>
</html>
